<template>
  <el-dialog
    :title="title"
    :visible.sync="dialogVisible"
    width="30%">
    <file-upload
      ref="upload"
      :data="data"
      :accept="accept"
      :limit="limit"
      :show-file-list="showFileList"
      :auto-upload="false"
      :list-type="listType"
      :value="value"
      v-on:input="(val)=>{$emit('input', val)}"
      :on-success-callback="onSuccessCallback">

    </file-upload>
    <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="submit" :loading="loading" v-on:loading="(load)=>{loading = load}">确 定</el-button>
  </span>
  </el-dialog>
</template>

<script>
  import FileUpload from './FileUpload'
  export default {
    name: 'FileUploadDialog',
    components: {FileUpload},
    props: {
        value: {
            type: [String,Array]
            //required: true
        },
      // 上传时附带的额外参数
      data: {
        type: Object
      },
      // 接受上传的文件类型
      //image/jpeg image/*
      accept: {
        type: String
      },
      // 最大允许上传个数,最少为1
      limit: {
        type: Number,
        default: 1
      },
      // 上传成功回调 文件上传成功时的钩子
      onSuccessCallback: {
        type: Function
      },
      listType:{
        type: String
      },
      // 弹窗标题
      title: {
        default: '文件上传'
      },
        submitButtonLoading: {
            type: Boolean,
            default: false
        },
        // 是否显示已上传的文件列表
        showFileList: {
            type: Boolean,
            default: true
        },
    },
    data () {
      return {
        dialogVisible: false,
        disabled: false,
        loading: this.submitButtonLoading,
      }
    },
    mounted () {
    },
    computed: {
    },
    methods: {
      show () {
        this.dialogVisible = true
      },

      hide () {
        this.dialogVisible = false
      },
      submit () {
        this.$refs.upload.submit()
      },
      clearFiles () {
        this.$refs.upload.clearFiles()
      }
    },
    watch: {
        submitButtonLoading(value){
          this.loading = value
        }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    text-align: center;
  }

</style>
<style>
  .avatar-uploader .el-upload__input{
    display: none;
  }
</style>
